<template>
	<view class="page">
		<uni-nav-bar background-color="#00a9ff" title="注册用户" color="white" :fixed="true"
		  statusBar="true" left-icon="left" @clickLeft="back"/>
		
		<image src="../../static/logo.png" class="mainlogo"></image>

		<input class="inputBox" type="text" placeholder="请输入昵称" v-model="username"
		 placeholder-style="color:rgba(162, 140, 156, 0.7); font-size:15px"/>

		<input class="inputBox" type="text" password placeholder="请输入密码" v-model="password"
		 placeholder-style="color:rgba(162, 140, 156, 0.7); font-size:15px"/>
		 
		<button class="btn" @click="registerUser">
			 <text space="emsp">注 册</text>
		</button>

	</view>
</template>

<script>
import axios from 'axios';
export default {
	data() {
		return {
			username: '',
			password: ''
		}
	},
	methods: {
		back() {
			uni.navigateBack();
		},
		// 注册账户
		registerUser() {
			if (!this.username || !this.password) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
				return;
			}
			// 发送请求注册用户
			axios.post('/api/user/register', {
				Username: this.username,
				Password: this.password
			}).then(res => {
				console.log(res.data.code);
				if (res.data.code === 200) {
					// 提示注册成功并跳转到首页
					uni.showToast({
						title: '注册成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}, 1500);
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
				}
			}).catch(err => {
				uni.showToast({
					title: '请求失败，请稍后再试',
					icon: 'none'
				});
			});
		}
	}
}
</script>

<style>
	
.mainlogo{
	width: 400rpx;
	height: 400rpx;
	display: flex;	
	margin:100rpx auto;
	border-radius: 100%;
}
.inputBox{
	background-color: #fff;
	display: flex;
	width: 270px;
	height: 50px;
	margin: 20px auto;
	border: solid #06061f9 ;
	border-radius: 5px;
	padding-left: 20px;
	/*font-size: 20px;*/
	/*box-shadow: 3px 3px 2px rgba(168, 140, 158, 0.6);*/


}
</style>
